<template>
  <div class="home">
    <img class="home-img" src="@/assets/home.png" alt="">
    <button class="sign" @click="sign">签到</button>
    <button class="students" @click="students">学生卡</button>
    <div class="video" @click="video"></div>
    <div class="literature" @click="literature"></div>
  </div>

</template>

<script>
  export default {
    name: 'HomePage',
    methods: {
      sign: function () {
        this.$router.push('/sign')
      },
      students: function () {
        this.$router.push('/students')
      },
      video: function () {
        this.$router.push('/video')
      },
      literature: function () {
        this.$router.push('/literature')
      }
    }
  }
</script>


<style scoped>
  .home {
    width: 100vw;
    height: 100vh;
  }

  .home-img {
    display: block;
    width: 100%;
    height: 100%
  }

  .sign {
    position: absolute;
    top: 1.5rem;
    right: 1rem;
    width: 2rem;
    padding: .1rem 0;
    font-size: .45rem;
    font-weight: bold;
    color: #fff;
    background: #4a7cca;
  }

  .students {
    position: absolute;
    top: 3rem;
    right: 1rem;
    width: 2rem;
    padding: .1rem 0;
    font-size: .45rem;
    font-weight: bold;
    color: #fff;
    background: #3ba881;
  }

  .video {
    position: absolute;
    top: 25%;
    left: 30%;
    width: 20vw;
    height: 4.4rem
  }
  .video:hover {
    cursor: pointer;
    border: 11px solid red;
  }
  .literature {
    position: absolute;
    bottom: 15%;
    left: 12%;
    width: 20vw;
    height: 4.4rem;
  }
  .literature:hover {
    cursor: pointer;
    border: 11px solid red;
  }
</style>
